<template>
    <customNavigationBar title="我的账户" />

    <view class="content">
        <view class="title">我的账户</view>

        <template v-if="identityType == 4">
            <view class="items">
                <view class="item">
                    <image class="icon" src="/static/common/icon_bank.png"></image>

                    <view class="infomation" :style="{ display: companyInfomation?.bankCardNo ? 'block' : 'flex' }">
                        <view class="title">银行卡账号</view>
                        <view class="userBindInfo" v-if="companyInfomation?.bankCardNo">
                            <text>{{ companyInfomation?.bankName }}</text>
                            <text>{{ `(${companyInfomation?.bankCardNo.slice(0, 3)}****${companyInfomation?.bankCardNo.slice(-4)})` }}</text>
                        </view>
                    </view>

                    <view class="right" @click="binddingBank">
                        <text v-if="companyInfomation?.status == 0 && companyInfomation?.companyName" class="blue">审核中</text>
                        <text v-else-if="companyInfomation?.status == 1" class="blue">修改</text>
                        <text v-else-if="companyInfomation?.status == -1" class="red">审核失败，请重新绑定</text>
                        <text v-else class="red">绑定</text>

                        <image src="/static/common/icon_more.png" class="more"></image>
                    </view>
                </view>

                <!--  <view class="item">
		        <image class="icon" src="/static/common/icon_zfb.png"></image>
		
		        <view class="infomation" :style="{ display: binddingInfomation.alipayOpenId ? 'block' : 'flex' }">
		            <view class="title">支付宝账号</view>
		            <view class="userBindInfo" v-if="binddingInfomation.alipayOpenId">张三（1726111111）</view>
		        </view>
		
		        <view class="right">
		            <span>{{ binddingInfomation.alipayOpenId ? '解绑' : '绑定' }}</span>
		            <image src="/static/common/icon_more.png" class="more"></image>
		        </view>
		    </view>
		
		    <view class="item">
		        <image class="icon" src="/static/common/icon_wx.png"></image>
		
		        <view class="infomation" :style="{ display: binddingInfomation.wxOpenId ? 'block' : 'flex' }">
		            <view class="title">微信账号</view>
		            <view class="userBindInfo" v-if="binddingInfomation.wxOpenId">张三（1726111111）</view>
		        </view>
		
		        <view class="right">
		            <span>{{ binddingInfomation.wxOpenId ? '解绑' : '绑定' }}</span>
		            <image src="/static/common/icon_more.png" class="more"></image>
		        </view>
		    </view> -->
            </view>
        </template>

        <template v-else>
            <view class="items">
                <view class="item">
                    <image class="icon" src="/static/common/icon_bank.png"></image>

                    <view class="infomation" :style="{ display: binddingInfomation?.bankCardNumber ? 'block' : 'flex' }">
                        <view class="title">银行卡账号</view>
                        <view class="userBindInfo" v-if="binddingInfomation?.bankCardNumber">
                            <text>{{ binddingInfomation?.bankName }}</text>
                            <text>{{ `(${binddingInfomation?.bankCardNumber?.slice(0, 3)}****${binddingInfomation?.bankCardNumber?.slice(-4)})` }}</text>
                        </view>
                    </view>

                    <view class="right" @click="binddingBank">
                        <span v-if="binddingInfomation?.xmtrBankStatus == 0">待审核</span>
                        <span v-else-if="binddingInfomation?.xmtrBankStatus == 1">审核中</span>
                        <span v-else-if="binddingInfomation?.xmtrBankStatus == 2">绑定成功</span>
                        <span v-else-if="binddingInfomation?.xmtrBankStatus == 3">审核失败（重新上传）</span>
                        <span v-else>绑定</span>

                        <image src="/static/common/icon_more.png" class="more"></image>
                    </view>
                </view>

                <!--  <view class="item">
                <image class="icon" src="/static/common/icon_zfb.png"></image>

                <view class="infomation" :style="{ display: binddingInfomation.alipayOpenId ? 'block' : 'flex' }">
                    <view class="title">支付宝账号</view>
                    <view class="userBindInfo" v-if="binddingInfomation.alipayOpenId">张三（1726111111）</view>
                </view>

                <view class="right">
                    <span>{{ binddingInfomation.alipayOpenId ? '解绑' : '绑定' }}</span>
                    <image src="/static/common/icon_more.png" class="more"></image>
                </view>
            </view>

            <view class="item">
                <image class="icon" src="/static/common/icon_wx.png"></image>

                <view class="infomation" :style="{ display: binddingInfomation.wxOpenId ? 'block' : 'flex' }">
                    <view class="title">微信账号</view>
                    <view class="userBindInfo" v-if="binddingInfomation.wxOpenId">张三（1726111111）</view>
                </view>

                <view class="right">
                    <span>{{ binddingInfomation.wxOpenId ? '解绑' : '绑定' }}</span>
                    <image src="/static/common/icon_more.png" class="more"></image>
                </view>
            </view> -->
            </view>
        </template>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { userApis } from '@/utils/apis';

const binddingInfomation = ref(null);
const identityType = ref(JSON.parse(uni.getStorageSync('userInfomation')).identityType);

onShow(() => {
    if (identityType.value == 4) {
        getCompanyInfomation();
        return;
    }
    getBinddingList();
});

const companyInfomation = ref({});

const getCompanyInfomation = async () => {
    let res = await userApis.getCompanyInfo();
    companyInfomation.value = res.data;
};

let binddingBank = () => {
    uni.navigateTo({
        url: '/pages_user/banddingBank/banddingBank'
    });
};

const getBinddingList = async () => {
    let res = await userApis.getBankDetail();
    binddingInfomation.value = res.data;
};
</script>

<style lang="scss" scoped>
.content {
    padding: 28rpx 24rpx 0;

    .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
    }
    .items {
        margin-top: 52rpx;
        width: 100%;
        .item {
            margin-bottom: 40rpx;
            display: flex;
            align-items: center;
            .icon {
                width: 96rpx;
                height: 96rpx;
                margin-right: 36rpx;
            }
            .infomation {
                align-items: center;
                flex: 1;
                .title {
                    font-size: 28rpx;
                    color: #333333;
                    font-weight: 400;
                }
                .userBindInfo {
                    width: 100%;
                    margin-top: 16rpx;
                    font-size: 28rpx;
                    color: #333333;
                }
            }
            .right {
                display: flex;
                align-items: center;
                margin-left: auto;
                font-size: 28rpx;
                color: #333333;
                .more {
                    width: 21rpx;
                    height: 36rpx;
                    margin-left: 24rpx;
                }
            }
        }
    }
}
</style>
